<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调度日志列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <style>
        .el-header{
            color: #333;
            padding: 11px;
            background: white;
            margin: 0 0 5px 0;
        }
        .el-main {
            color: #333;
            padding: 0;
            background:white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="注册类型">
                        <el-select v-model="queryForm.jobAction" clearable placeholder="运行动作">
                            <el-option
                                v-for="(item,key) in sysJobActionList"
                                :key="key"
                                :label="item"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="queryForm.jobResult" clearable placeholder="运行结果">
                            <el-option
                                v-for="(item,key) in sysJobResultList"
                                :key="key"
                                :label="item"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="initSysJobLogList">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        :data="sysJobLogList"
                        border
                        :header-cell-style="getRowClass"
                        style="width:98%;margin:0 10px;">
                    <el-table-column
                        prop="id"
                        label="ID"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="jobId"
                        width="80"
                        label="任务ID">
                    </el-table-column>
                    <el-table-column
                        prop="jobAction"
                        width="120"
                        label="运行动作">
                    </el-table-column>
                    <el-table-column
                        label="运行结果"
                        align="center"
                        width="120"
                        prop="jobResult">
                    </el-table-column>
                    <el-table-column
                        prop="jobStartTime"
                        label="任务开始时间"
                        width="110">
                        <template slot-scope="scope">
                            <span v-html="lineFeedTime(scope.row.jobStartTime)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="jobEndTime"
                        label="任务结束时间"
                        width="110">
                        <template slot-scope="scope">
                            <span v-html="lineFeedTime(scope.row.jobEndTime)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="jobUseTime"
                        width="80"
                        label="耗时(ms)">
                    </el-table-column>
                    <el-table-column
                        prop="jobNote"
                        label="描述">
                        <template slot-scope="scope">
                            <el-link @click="logDesc(scope.row)">{{scope.row.jobNote}}</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </el-main>
        </el-container>

    </div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            sysJobResultList: ["SUCCESS","FAIL"],
            sysJobActionList: ["MANUAL","AUTO"],
            sysJobLogList:[],

            queryForm:{
                jobId: 32
            },

            page:{
                page:1,
                pageSize:10,
                total:0
            }
        },
        created(){
            this.queryForm.jobId = getQueryString("jobId");
        },
        mounted(){
            this.initSysJobLogList();
        },
        methods: {
            initSysJobLogList(){

                axios.post(domain + "/sysJobLog/getSysJobLogByPage",{
                    page:this.page.page,
                    pageSize:this.page.pageSize,
                    jobId: this.queryForm.jobId,
                    jobResult: this.queryForm.jobResult,
                    jobAction: this.queryForm.jobAction
                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.sysJobLogList = res.data.rows;
                        this.page.total = res.data.records;
                    }else {
                        notify(resp)
                    }
                });
            },
            handleSizeChange(val){
                if(this.page.pageSize != val){
                    this.page.pageSize = val;
                    this.initSysJobLogList();
                }
            },
            handleCurrentChange(val){
                if(this.page.page != val){
                    this.page.page = val;
                    this.initSysJobLogList();
                }
            },
            getRowClass({ rowIndex }){
                if (rowIndex == 0) {
                    return 'background:RGB(238,239,246)'
                } else {
                    return ''
                }
            },
            lineFeedTime(cellValue){
                return cellValue.replace(" ",'</br>');
            },
            logDesc(row){
                window.open(domain + "/sysJobLog/getSysJobLogById?id="+row.id);
            }
        }
    });

</script>
</body>
</html>
